<template>
  <div>
    <table>
      <th>欢迎光临_vue开发的收银系统_水果店</th>
      <tr>
        <td>苹果10￥/斤,折扣&gt;8折></td>
      </tr>
      <tr>
        <td>请输入你要购买的斤数 <input v-model="num" type="text" /></td>
      </tr>
      <tr>
        <td><button @click.prevent="settle">结账买单</button></td>
      </tr>
      <tr>
        <td>结账单:总价:{{ a }}元 折后价:{{ b }}元 省了:{{ c }}元</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "WorkApp",

  data() {
    return {
      num: "",
      a: "0",
      b: "0",
      c: "0",
    };
  },

  mounted() {},

  methods: {
    settle() {
      this.a = this.num * 10;
      this.b = this.a * 0.8;
      this.c = this.a - this.b;
    },
  },
};
</script>

<style lang="css" scoped>
div {
  margin: 0 auto;
  height: 200px;
  width: 400px;
}
table {
  border-collapse: collapse;
}
td {
  text-align: center;
  border: 1px solid black;
}
</style>